<template>
  <div class="home-container">
    <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
    >
      <div class="home-top">
        <RouterLink to="/search"
        ><van-search placeholder="根据标签匹配用户" input-align="center"
        /></RouterLink>
      </div>
      <div class="home-swipe">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="home-recommend">
        <h2>
          推荐用户
          <span>精准匹配&nbsp;<van-switch v-model="checked" /></span>
        </h2>
        <van-skeleton v-if="loading == true">
          <template #template>
            <div :style="{ display: 'flex', width: '100%' }">
              <van-skeleton-image />
              <div :style="{ flex: 1, marginLeft: '16px' }">
                <van-skeleton-paragraph row-width="60%" />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
                <van-skeleton-paragraph />
              </div>
            </div>
          </template>
        </van-skeleton>
        <user-card-list :user-list="userList"  :loading = "loading"/>

      </div>
    </van-pull-refresh>


  </div>
  <copyright/>
</template>

<script lang="ts" setup>

import { onMounted, ref, watch } from 'vue'
import myAxios from "../plugins/myAxios.ts";
import {useRoute} from "vue-router";
import {showFailToast, showSuccessToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "@/models/user";


const route = useRoute();
const {tags} = route.query;


const userList = ref([]);
const isMatchMode =  ref<boolean>(false)
let userListData;

const images = [
  'https://bucket-ss.oss-cn-hangzhou.aliyuncs.com/index_background/v2-e95c23e74994209b94628850ed2f8cda_r.jpg',
  'https://bucket-ss.oss-cn-hangzhou.aliyuncs.com/index_background/v2-474122ad1e2fa1e421df21c485453f20_r.jpg',
    'https://bucket-ss.oss-cn-hangzhou.aliyuncs.com/index_background/%7DR42P2BGCMMQZ%7E8%25%29S2%7D4X4.jpg',
    'https://bucket-ss.oss-cn-hangzhou.aliyuncs.com/index_background/%288KH%7EV3H_A%60%7EBZ6L4%7BPAW9F.jpg'
]
const loading = ref(true)
const isLoading = ref(false);
let preNum = 1;
let randomNum = 0;
const onRefresh = () => {
  if (checked.value) {
    isLoading.value = false;
    return;
  }
  setTimeout(() => {
    isLoading.value = false;

    let randomNum = Math.floor(Math.random() * 5) + 1;

    // 确保与上一个数不同
    while (randomNum === preNum) {
      randomNum = Math.floor(Math.random() * 5) + 1;
    }

    preNum = randomNum;

    // console.log("random: " + randomNum);
    // console.log("preNum: " + preNum);
    recommendUsers();


  }, 1000);
};
const recommendUsers = async () => {

  userListData = await myAxios.get('/user/recommend', {
    params: {
      pageSize: 7,
      pageNum: randomNum === 0 ? preNum : randomNum,
    },
  })
      .then(function (response) {
        //console.log('/user/recommend succeed', response);
        return response?.data?.records;//返回数据  ?.  可选链操作符，避免数据数据为空
      })
      .catch(function (error) {
        showFailToast(error.message);
      })
  if (userListData) {
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;


};


// 精准匹配
const checked = ref(false)
const doMatch = async () => {


  const num = 15;
  userListData = await myAxios.get('/user/match', {
    params: {
      num,
    },
  })
      .then(function (response) {
        // console.log('/user/match succeed', response);
        return response?.data;
      })
      .catch(function (error) {
        showFailToast(error.message);
      })
  if (userListData) {
    userListData.forEach((user: UserType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;



}

watch(checked, newVal => {
  if (newVal) {
    doMatch()
  } else {
    recommendUsers()
  }
})

onMounted(() => {
  recommendUsers()
})
</script>


<style lang="scss" scoped>
.home-container {
  height: 100%;
  display: block;
  .home-swipe {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .home-recommend {
    padding: 10px;
    padding-bottom: 80px;
    h2 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      color: #48b0e8;
      font-size: large;
      span {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>






